<template>
  <view class="container"  :style="{ paddingTop: headerHeight + 'px' }">
    <CustomHeader @height-change="onHeaderHeightChange" />

    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="user-profile">
        <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
        <view class="user-details">
          <text class="username">{{ userInfo.name }}</text>
          <text class="phone">{{ userInfo.phone }}</text>
        </view>
      </view>
      <view class="qr-code" @click="showQRCode">
        <view class="qr-placeholder">
          <image class="qr-code-image" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/qrcode.png" mode="heightFix"></image>
        </view>
        <text class="share-text">分享码</text>
      </view>
    </view>

    <!-- 销售看板 -->
    <view class="board-title">销售看板</view>
    <view class="sales-board">
      <swiper 
        class="sales-swiper" 
        :indicator-dots="false" 
        :autoplay="true" 
        :interval="4000" 
        :duration="500" 
        :circular="true"
        @change="onSwiperChange"
      >
        <swiper-item v-for="(item, index) in salesData" :key="index">
          <view class="swiper-content">
            <view class="sales-amount">
              <text class="amount-label">{{ item.label }}</text>
              <text class="amount-value">{{ item.amount }}</text>
            </view>
            
            <!-- uCharts柱状图 -->
            <view class="chart-container">
              <qiunDataCharts 
                type="column"
                :opts="chartOpts"
                :chartData="item.chartData"
                :canvas2d="true"
                :canvasId="'salesChart' + index"
              />
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="swiper-indicators">
      <view 
        v-for="(item, index) in salesData" 
        :key="index"
        class="indicator-dot"
        :class="{ 'active': currentSwiperIndex === index }"
        @click="goToSlide(index)"
      ></view>
    </view>

    <!-- 订单按钮 -->
    <view class="order-buttons">
      <button class="btn-outline" @click="goToMonthOrders">本月已完成订单</button>
      <button class="btn-filled" @click="goToMyOrders">我的订单</button>
    </view>

    <!-- 客户服务 -->
    <view class="customer-service">
      <text class="service-title">客户服务</text>
      
      <view class="service-item" @click="goToAddressManager">
        <view class="service-left">
          <image class="service-icon" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/address.png" mode="heightFix"></image>
          <text class="service-text">地址管理</text>
        </view>
        <view class="service-right">
          <text class="service-desc">修改、创建收货地址</text>
          <text class="arrow">›</text>
        </view>
      </view>

      <view class="service-item" @click="contactService">
        <view class="service-left">
          <image class="service-icon" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/kf.png" mode="heightFix"></image>
          <text class="service-text">联系客服</text>
        </view>
        <view class="service-right">
          <text class="service-desc">09:00—18:00（法定节假日除外）</text>
          <text class="arrow">›</text>
        </view>
      </view>

      <view class="service-item" @click="goToFAQ">
        <view class="service-left">
          <image class="service-icon" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/icons/help.png" mode="heightFix"></image>
          <text class="service-text">常见问题</text>
        </view>
        <view class="service-right">
          <text class="service-desc">用户、隐私协议</text>
          <text class="arrow">›</text>
        </view>
      </view>
    </view>
    <ContactServiceModal ref="contactServiceModal" style="z-index: 9999; position: relative;" />

    <CustomTabBar :activeIndex="4" />
  </view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue'
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
import CustomHeader from '@/components/CustomHeader.vue'
import authManager from '@/utils/auth';
import { userApi } from '@/request/user';
import ContactServiceModal from '@/components/ContactServiceModal.vue'

export default {
  components: { 
    CustomTabBar,
    CustomHeader,
    qiunDataCharts,
    ContactServiceModal
  },
  data() {
    return {
      currentSwiperIndex: 0,
      userInfo: {},
      headerHeight: 0,
      chartOpts: {
        color: ['#000', '#8B7EC8', '#91CB74', '#FAC858'],
        fontColor: '#000',
        padding: [25, 15, 15, 15],
        enableScroll: false,
        xAxis: {
          disableGrid: true,
          fontSize: 10
        },
        yAxis: {
          gridType: 'solid',
          splitNumber: 2,
        showTitle: true,
          fontSize: 10,
          data: [
          {
            title: '万元',
            fontColor: '#666',
            axisLine: false,
            titleFontSize: 10,
            titleOffsetY: -10,
            titleOffsetX: -20,
            formatter: (val) => {
              if (val >= 10000) {
                return (val / 10000).toFixed(1)
              }
              return val
            }
          }
          ],
        },
        legend: {
          show: false
        },
        extra: {
          column: {
            type: 'group',
            width: 25,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08
          }
        }
      },
      salesData: [
        {
          label: '本月销售额（元）',
          amount: '',
          chartData: {
            categories: [],
            series: [{
              name: '销售额',
              data: []
            }]
          }
        },
        {
          label: '总销售额（元）',
          amount: '',
          chartData: {
            categories: [],
            series: [{
              name: '销售额',
              data: []
            }]
          }
        },
      ]
    }
  },
  onLoad() {
      this.userInfo = authManager.getUserInfo();
      userApi.saleOrderInfo().then(res => {
        console.log(res);
        this.salesData[0].amount = res.month.sum;
        this.salesData[1].amount = res.total.sum;
        this.salesData[0].chartData.categories = res.month.labels;
        this.salesData[1].chartData.categories = res.total.labels;
        this.salesData[0].chartData.series[0].data = res.month.values;
        this.salesData[1].chartData.series[0].data = res.total.values;
      })
  },
  methods: {
			onHeaderHeightChange(height) {
				this.headerHeight = height;
			},
    showQRCode() {
      uni.navigateTo({
        url: '/pages/user/qrcode'
      });
    },
    goToMonthOrders() {
      // 跳转本月订单
      const startDate = new Date();
      startDate.setDate(1);
      const endDate = new Date();
      uni.navigateTo({
        url: '/pages/order/orderlist?orderStatus=3&startTime=' + startDate.toISOString().split('T')[0] + '&endTime=' + endDate.toISOString().split('T')[0]
      })
    },
    goToMyOrders() {
      uni.navigateTo({
        url: '/pages/order/orderlist'
      })
    },
    goToAddressManager() {
      // uni.navigateTo({
      //   url: '/pages/user/address'
      // })
      uni.chooseAddress({
        success(res) {
        },
        fail(e) {
          console.log("e :>> ", e);
        },
      });
    },
    contactService() {
      this.$refs.contactServiceModal.show();
    },
    goToFAQ() {
      // uni.navigateTo({
      //   url: '/pages/user/faq'
      // })
    },
    onSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    },
    goToSlide(index) {
      this.currentSwiperIndex = index;
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #F7F7F7;
  min-height: 100vh;
  padding-bottom: 170rpx;
}

.header {
  background-color: #fff;
  padding: 60rpx 0 40rpx 0;
  text-align: center;
  
  .logo {
    .logo-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #000;
      display: block;
      letter-spacing: 2rpx;
    }
    
    .logo-subtitle {
      font-size: 24rpx;
      color: #666;
      display: block;
      margin-top: 8rpx;
    }
  }
}

.user-info {
  background-color: #fff;
  padding: 40rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .user-profile {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }
    
    .user-details {
      display: flex;
      flex-direction: column;
      
      .username {
        font-size: 32rpx;
        font-weight: bold;
        color: #000;
        margin-bottom: 8rpx;
      }
      
      .phone {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
  
  .qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .qr-placeholder {
      .qr-code-image {
        height: 60rpx;
      }
    }
    
    .share-text {
      font-size: 22rpx;
      color: #666;
    }
  }
}
  .board-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #000;
    display: block;
    margin-bottom: 21rpx;
    margin-left: 55rpx;
  }

.sales-board {
  background-color: #fff;
  margin: 30rpx;
  margin-bottom: 20rpx;
  
  .sales-swiper {
    height: 450rpx;
    width: 100%;
    
    .swiper-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      
      .sales-amount {
        margin-bottom: 40rpx;
        display: flex;
        justify-content: space-between;
        padding: 0 50rpx;
        padding-top: 35rpx;
        
        .amount-label {
          font-size: 24rpx;
          color: #000;
          margin-bottom: 12rpx;
        }
        
        .amount-value {
          font-size: 48rpx;
          font-weight: bold;
          color: #000;

          &::before {
            font-size: 24rpx;
            content: '￥';
          }
        }
      }
      
      .chart-container {
        flex: 1;
        width: 100%;
        min-height: 250rpx;
      }
    }
  }
}

.swiper-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  width: 301rpx;
  margin: 0 auto;
  margin-bottom: 60rpx;
  
  .indicator-dot {
    width: 50%;
    height: 4rpx;
    background-color: #E0E0E0;
    border-radius: 2rpx;
    transition: all 0.3s ease;
    cursor: pointer;

    
    &.active {
      background-color: #000;
    }
  }
}

.order-buttons {
  display: flex;
  gap: 40rpx;
  padding: 0 120rpx;
  margin-bottom: 40rpx;
  
  .btn-outline, .btn-filled {
    flex: 1;
    height: 88rpx;
    border-radius: 0;
    font-size: 24rpx;
    border: none;
    line-height: 88rpx;
    
    &::after {
      border: none;
    }
  }
  
  .btn-outline {
    background-color: #fff;
    color: #000;
    border: 2rpx solid #000;
  }
  
  .btn-filled {
    background-color: #000;
    color: #fff;
  }
}

.customer-service {
  background-color: #F7F7F7;
  padding: 0 30rpx;
  
  .service-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #000;
    display: block;
    padding: 30rpx 0 20rpx 0;
  }
  
  .service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50rpx 0;
    border: none;
    border-bottom: 1rpx solid #ccc;

    &::after {
      border: none;
    }
    
    &:last-child {
      border-bottom: none;
    }
    
    .service-left {
      display: flex;
      align-items: center;
      
      .service-icon {
        color: #000;
        height: 30rpx;
        margin-right: 24rpx;
      }
      
      .service-text {
        font-size: 28rpx;
        color: #000;
      }
    }
    
    .service-right {
      display: flex;
      align-items: center;
      
      .service-desc {
        font-size: 24rpx;
        color: #999;
        margin-right: 16rpx;
      }
      
      .arrow {
        font-size:32rpx;
        color: #000;
      }
    }
  }
}
</style> 